<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="layouts::header"></head>

<body>


<nav th:replace="layouts::navbar"></nav>


<div class="container">
  <h3>主面板</h3>
<p th:text="${versionNumber}"></p>
  <hr>
<h4>当前项目</h4>
  <div class="row">
    <div class="col-md-6">
<table class="table table-bordered table-striped">
  <thead class="thead-dark">
  <tr>
    <th>项目名称</th>
    <th>项目状态</th>
  </tr>
  </thead>
  <tbody>
  <tr th:each="aProject: ${projects}">
    <td th:text="${aProject.name}"></td>
    <td th:text="${aProject.stage}"></td>
  </tr>
  </tbody>
</table>
</div>
  <div class="col-md-4">
    <canvas id="myPieChart" height="50" width="50"></canvas>
    <script>
      let chartData = "[[${projectStatusData}]]"
    </script>

  </div>
</div>

<div>
  <h4>当前学生</h4>
  <div class="row">
    <div class="col-md-6">
  <table class="table table-bordered table-striped">
    <thead class="thead-dark">
    <tr>
      <th>学生姓名</th>
      <th>微信号</th>
      <th>项目个数</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="aStudent: ${studentprojects}">
      <td th:text="${aStudent.name}"></td>
      <td th:text="${aStudent.wechatId}"></td>
      <td th:text="${aStudent.projectCount}"></td>
    </tr>
    </tbody>
  </table>
</div>
</div>
</div>
</div>

  <script type="text/javascript" th:src="@{css/js/myChart.js}"></script>
</body>
</html>